<template>
    <div class="linkage-setting">
        <!-- 联动设置 -->

        <el-input v-model="input2">
            <template #append>
                <span @click="handleOpenLinkageDrawer"> ...</span>
            </template>
        </el-input>
        <!-- <el-drawer class="" v-model="linkageDrawer" :title="`${currentValue.label}配置`" direction="rtl"> -->
        <bi-drawer v-model:drawer="linkageDrawer" :show-close="false">
            <!-- <div class="header">
                <el-icon><ArrowLeftBold /></el-icon>
                <h3>联动设置</h3>
            </div> -->

            <template #header>
                <h3>联动设置</h3>
            </template>

            <el-form ref="ruleFormRef" :model="formData" :rules="rules" label-width="120px" class="linkage-setting-form">
                <el-form-item label="关联横坐标">
                    <div class="item__content">
                        {{ (xData && xData?.map((item) => item.label)?.join(',')) || '' }}
                    </div>
                </el-form-item>
                <el-form-item label="联动组件" prop="events">
                    <el-select v-model="formData.events" placeholder="" multiple clearable value-key="id">
                        <el-option v-for="(item, index) in getCurrentCanvasComponentsOptions" :key="index" :label="item.label" :value="item" />
                    </el-select>
                </el-form-item>
                <el-form-item label="联动动作" prop="action">
                    <el-select v-model="formData.action" placeholder="">
                        <el-option v-for="item in getCurrentLinkOptions" :key="item.label" :label="item.label" :value="item.value" clearable />
                    </el-select>
                </el-form-item>
            </el-form>
        </bi-drawer>
        <!-- </el-drawer> -->
    </div>
</template>

<script setup>
import { computed, reactive, ref, toRefs, toRef, watch } from 'vue';
import { flatList } from '@/utils/common';
import useComponentConfig from '@/views/design-center/store/component-config';
const useComponentConfigStore = useComponentConfig();

const { pageConfig } = toRefs(useComponentConfigStore);
const props = defineProps({
    currentValue: {
        type: Object,
        default: () => {}
    },
    xData: {
        type: Array,
        default: () => []
    },
    linkageSetting: {
        type: Object,
        default: () => {}
    }
});
const { action = '', events = [] } = toRefs(props.linkageSetting);

const emit = defineEmits(['update-form-data']);
const { id, type } = toRefs(props.currentValue);

const xData = toRef(props, 'xData');

/**
 * @description:过滤掉当前组件
 * @param {*} computed
 * @return {*}
 */
const getCurrentCanvasComponentsOptions = computed(() => {
    //先扁平化组合下的数组,然后过滤当前的组件,在转化成对应的数据结构
    let arr = flatList(pageConfig.value.list)
        .filter((item) => item.id !== id.value)
        .map((item) => {
            return {
                id: item.id,
                label: item.setups.componentName,
                linkageStatus: item.linkageStatus
            };
        });
    console.log(arr, 11111111);
    return arr;
});

const input2 = ref('');

const linkageDrawer = ref(false);

const formData = ref({
    action: '',
    events: []
});
formData.value.action = action.value || '';

formData.value.events = events.value || [];

const rules = reactive({});

const getCurrentLinkOptions = computed(() => {
    if (type.value === 'widget-select') {
        return [
            {
                label: '值变化',
                value: 'valueChange'
            }
        ];
    } else {
        return [
            {
                label: '单击',
                value: 'click'
            }
        ];
    }
});

watch(
    () => linkageDrawer.value,
    (nv) => {
        if (!nv) {
            input2.value = formData.value.events.map((item) => item.label).join(',');
            !nv && emit('update-form-data', 'linkageSetting', formData.value);
            // console.log(111111111, formData, getCurrentCanvasComponentsOptions.value);
        }
    }
);

const handleOpenLinkageDrawer = () => {
    linkageDrawer.value = true;
};
// console.log('--------', props.linkageSetting);
input2.value = props.linkageSetting?.events?.map((item) => item.label)?.join(',');
</script>
<style scoped lang="scss">
.linkage-setting {
    .header {
        display: flex;
        align-items: center;
    }
    :deep(.el-form-item) {
        margin-bottom: 0.25rem;
    }
    .item__content {
        line-height: 0.24rem;
        height: 0.24rem;
        width: 100%;
        border: 0.01rem solid #ccc;
        color: var(--el-text-color-regular);
        border: var(--el-border);
        border-radius: 0.05rem;
        text-indent: 0.08rem;
    }
    .linkage-setting-form {
        padding: 0.25rem;
    }
}
</style>
